<template>
  <div class="wrapper">
    <el-drawer
      :title="title"
      v-model="str"
      size="60%"
      :before-close="handleClose"
      destroy-on-close
      @close="close"
    >
      <div class="bd-txt">
        <slot name="form_option"></slot>
        <slot name="look_store"></slot>
        <slot name="bind_store"></slot>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { reactive, computed } from "vue";
export default {
  components: {
  },
  props: {
    drawer: {
      type: Boolean,
      default: false,
    },
    title:{
      type:String
    }
  },
  setup(props, { emit }) {
    console.log(props);
    // 计算属性
    let str = computed(() => {
      return props.drawer;
    });
    let title = computed(() => {
      return props.title;
    });
    let state = reactive({
      address: "",
      custom: "",
      sport: "",
      keyword: "",
      tableData: [],
    });
    function handleClose(done) {
        if(confirm("确认要关闭?")){
            emit("closeFun", false);
        }
    }
    return {
      state,
      str,
      handleClose,
    };
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  padding: 10px;
  .bd-txt {
    box-sizing: border-box;
    padding: 10px;
  }
}
  .wrapper /deep/ .el-drawer__body {
    overflow: auto;
  }
 .el-drawer__container::-webkit-scrollbar {
    display: none;
  }
 
</style>